<template>
	<view class="info column">
		<view class="column flex-1 hb scrolly">
			<view class="bgf">
				<view class="column p20">
					<text class="justify-end base-price" @click="navTo('pages/user/log_off')">注销</text>
					<view class="centerV">
						<view class="">
							<custom-upload uploadType="avatar" v-model:value="userInfo.head_img"
								@uploadSuccess="e=>userInfoUpdate('head_img',e)">
								<u-avatar :src="userInfo.head_img" size="150rpx" />
							</custom-upload>
						</view>
						<view class="align-center" @click="openPopup">
							<text class="mr10">{{userInfo.nickname}}</text>
							<u-icon name="edit-pen" size="40rpx" />
						</view>
					</view>
				</view>
				<up-cell-group :border="false">
					<up-cell title="手机号码" :value="userInfo.phone" />
					<up-cell title="所在地" value="重庆-重庆市" />
					<up-cell title="角色" isLink :value="`${userInfo.vip_id?'续费会员':'开通会员'}`"
						@click="navTo(`pages/user/vip/${userInfo.is_apply==1?'index':'apply'}`)" />
				</up-cell-group>
			</view>
			<view class="">
				<uni-popup ref="alertDialog" type="dialog" style="z-index: 999;">
					<uni-popup-dialog type="info" cancelText="取消" confirmText="退出" title="退出登录" content="确定要退出登录吗?"
						@confirm="dialogConfirm" @close="alertDialog.close()" />
				</uni-popup>
				<u-popup :show="showInputPopup" closeable @close="closePopup" round="20rpx" mode="center">
					<view class="popup_content column">
						<text class="center bold fs30">修改昵称</text>
						<view class="mt20 column">
							<u-input v-model="popupInput" border="bottom" placeholder="请输入姓名"></u-input>
						</view>
						<view class="mt40 align-center">
							<u-button text="取消" type="primary" shape="circle" plain :customStyle="{margin:'0 10rpx 0 0'}"
								@click="closePopup" />
							<u-button text="确认修改" type="primary" shape="circle" :customStyle="{margin:'0  0  0 10rpx'}"
								@click="userInfoUpdate('nickname',popupInput)" />
						</view>
					</view>
				</u-popup>
			</view>
		</view>
		<view class="mt20 column p30">
			<u-button text="退出登录" type="primary" :customStyle="{height:'80rpx',borderRadius:'20rpx'}"
				@click="alertDialog.open()" />
			<view class="align-center center mt30">
				<text class="base-color" @click="navTo('pages/article/details',{code:'agreement'})">《用户协议》</text>
				<text>与</text>
				<text class="base-color" @click="navTo('pages/article/details',{code:'policy'})">《隐私条款》</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		useStore
	} from "vuex";
	import {
		getUserInfo,
		navTo,
		showSuccess
	} from "@/core/app";
	import {
		userUpdate,
	} from "@/api/user/index";
	import {
		ref
	} from "vue";
	const userInfo = ref({
		head_img: '',
		nickname: '',
		phone: '',
		vip_id: '',
		vip_end_time: '',
		is_apply: ''
	})
	onLoad(() => {
		userInfo.value = getUserInfo()
	})
	// 退出登陆
	const alertDialog = ref(null)
	const store = useStore()
	const dialogConfirm = () => {
		store.dispatch('Logout')
		setTimeout(() => {
			navTo('pages/find-car/index')
		}, 500)
	}
	const showInputPopup = ref(false)
	const popupInput = ref('')
	const closePopup = () => {
		showInputPopup.value = false
		popupInput.value = ''
	}
	const openPopup = () => {
		popupInput.value = userInfo.value.nickname
		showInputPopup.value = true
	}
	const userInfoUpdate = async (key, value) => {
		if (key == 'nickname' && !value) return showToast('请输入姓名')
		let res = await userUpdate({
			[key]: value
		})
		if (res) {
			if (key == 'nickname') {
				closePopup()
			}
			userInfo.value[key] = value
			showSuccess('修改成功')
		}
	}
</script>

<style lang="scss" scoped>
	.info {
		height: 100%;

		.popup_content {
			width: 500rpx;
			padding: 30rpx;
			background: #fff;
			border-radius: 20rpx;
		}
	}
</style>